import React, { useState } from "react";
import { fileItem } from "../data";
import { FormComponentProps } from "antd/es/form";
import { Form, Modal, Input, Upload, Button } from "antd";
import { UploadOutlined } from "@ant-design/icons";


interface Props extends FormComponentProps {
    close: Function;
    save: Function;
    data: Partial<fileItem>;
}
interface State {
    files:any;
    uploading:boolean
}
const Save: React.FC<Props> = props => {
    const initState: State = {
        files:[],
        uploading: false,
    };
    const { form: { getFieldDecorator }, form } = props;
    const [files,setFiles] = useState(initState.files);
    const submitData = () => {
        form.validateFields((err, fileValue) => {
            if (err) return;
            fileValue.id = props.data.id;
            fileValue.files = new File([files],files.name);
            props.save(fileValue); 
        });
        
    };
    const uprops = {
        beforeUpload: (file) => {
          setFiles(file)
          return false;
        },
      };
    return (
        <Modal 
        title={`${props.data.id ? '编辑' : '新建'}文件`}
        visible
        okText="确定"
        cancelText="取消"  
        onOk={() => { submitData() }}
        onCancel={() => props.close()}
        >
             <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
                <Form.Item
                    key="fileName"
                    label="文件名称"
                >
                    {getFieldDecorator('fileName', {
                        rules: [{ message: '请输入文件名称' }],
                        initialValue: props.data.fileName
                    })(<Input placeholder="请输入" />)}
                </Form.Item>
             </Form>
             {
             props.data.id ?(
                    <div style={{display:'none'}}>
                    </div>
                ):(
                    <div>
                    <Upload {...uprops}>
                        <div style={{marginLeft:'70%'}}>
                            <Button >
                                <UploadOutlined />
                            上传文件
                                </Button>
                        </div>
                    </Upload>
                </div>
            )}
        </Modal>
    )
}
export default Form.create<Props>()(Save);

  